<template>
  <div class="main">
    <center>
      <div class="cardocumentadd">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>车辆档案数据</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            >
          </div>
          <div class="text item">
            <div class="left">
              <el-form
                :inline="true"
                :model="formInline"
                ref="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="开始数据">
                  <el-input
                    v-model="formInline.start"
                    placeholder="开始数据"
                  ></el-input>
                </el-form-item>
                <el-form-item label="结束数据">
                  <el-input
                    v-model="formInline.end"
                    placeholder="结束数据"
                  ></el-input>
                </el-form-item>
                <el-form-item label="所属地区">
                  <el-select v-model="areaname" placeholder="请选择">
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="right">
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="percentage"
              ></el-progress>
              <el-button class="ruku" type="primary" @click="addcardocument"
                >入库</el-button
              >
              <el-button class="ruku" @click="resetForm('formInline')"
                >重置</el-button
              >
            </div>
          </div>
        </el-card>
      </div>

      <div class="table1">
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          show-summary
        >
          <el-table-column prop="time" label="最后日期" width="180">
          </el-table-column>
          <el-table-column prop="cnt" label="入库总数 "> </el-table-column>
          <el-table-column prop="area_name" label="地区名称" width="180">
          </el-table-column>
          <el-table-column prop="start" label="开始数据"> </el-table-column>
          <el-table-column prop="end" label="结束数据"> </el-table-column>
          <el-table-column prop="color" label="颜色"> </el-table-column>
          <el-table-column prop="type" label="车型"> </el-table-column>
        </el-table>
      </div>
    </center>
  </div>
</template>

<script>
import { addcardocument } from "@/api/data";
import { getcarDocument } from "@/api/data";
export default {
  data() {
    return {
      formInline: {
        start: "",
        end: ""
      },
      percentage: 0,

      //表格数据
      tableData: [],

      options2: [
        { value: "海北藏族自治州", label: "海北藏族自治州" },
        { value: "西宁市", label: "西宁市" },
        { value: "海东市", label: "海东市" },
        { value: "黄南藏族自治州", label: "黄南藏族自治州" },
        { value: "海南藏族自治州", label: "海南藏族自治州" },
        { value: "玉树藏族自治州", label: "玉树藏族自治州" },
        { value: "果洛藏族自治州", label: "果洛藏族自治州" },
        { value: "海西蒙古族藏族自治州", label: "海西蒙古族藏族自治州" }
      ],
      areaname: ""
    };
  },
  created() {
    getcarDocument("/data/getcarDocumentCount").then(res => {
      if (res.code === 200) {
        this.tableData = res.data;
      } else {
        this.$message(res.data);
      }
    });
  },
  methods: {
    addcardocument() {
      var params = {
        start: this.formInline.start,
        end: this.formInline.end,
        area_name: this.areaname
      };
      addcardocument("/data/addcarDocument", params).then(res => {
        if (res.code === 200) {
          this.$message("添加数据成功！");
          this.percentage = 100;
        } else if (res.code === 500) {
          this.percentage = 50;
          this.$message(res.data);
        }
      });
    },
    resetForm(formName) {
      this[formName] = {};
      this.$refs[formName].resetFields();
    },
    tableRowClassName({ row, rowIndex }) {
      debugger;
      if (rowIndex === 5) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    }
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 700px;
  margin-top: 10px;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  margin-top: 10px;
}
.right {
  float: right;
  width: 48%;
  margin-top: 10px;
}
.cardocumentadd {
  width: 70%;
}
.ruku {
  margin-top: 35px;
}
.table1 {
  width: 70%;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
